<template>
    <div>
        <headNav></headNav>
        <times ref="times" 
            :timerType="timerType" 
            @handelShowPicker="handelShowPicker"
            @handelGeData="handelGeData">
        </times>
        <div class="circles">
            <div class="center">
                <circlesPie
                :scorePraise="scorePraise"
                :scoreCritique="scoreCritique"
                :scorePraiseRatio="scorePraiseRatio"
                :scoreCritiqueRatio="scoreCritiqueRatio"
                :reviewTextCount="reviewTextCount"
                :score="score">
                </circlesPie>
                <ranking
                v-if="isAllStudent"
                :bestStudent="bestStudent"
                :headwayStudent="headwayStudent">
                </ranking>
            </div>
        </div>
        <List 
            :lists="studentReviewList"
            @handelGeData="handelGeData">
        </List>
        <Popup v-model="showPicker" position="bottom">
            <Picker
                show-toolbar
                :columns="timerTypeList"
                @confirm="handelClassifySelect"
                @cancel="showPicker = false"
            />
        </Popup>
    </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import times from './components/times'
import circlesPie from './components/pie';
import ranking from './components/ranking';
import List from './components/list';
import { Popup,Picker,Toast } from 'vant';
import { time } from '@/util/public'
export default {
    name:'studentAppraiseScoreInfo',
    components:{
        headNav,
        times,
        circlesPie,
        ranking,
        List,
        Popup,
        Picker,
        Toast
    },
    data(){
        return {
            currentRate: 10,
            timerType:'周',
            timerTypeList: ['周', '月', '自定义'],
            showPicker:false,
            scorePraise:0,        //表扬
            scoreCritique:0,      //批评
            scorePraiseRatio:0,   //表扬比例
            scoreCritiqueRatio:0, //批评比例
            reviewTextCount:0,    //文字点评
            score:0,              //最终得分
            bestStudent:{         //最佳学生
                bestStudentImgUrl:'',
                bestStudentName:'',
                bestStudentScore:0
            },
            headwayStudent:{      //进步学生
                headwayStudentImgUrl:'',
                headwayStudentName:'',
                headwayStudentScore:0
            },
            studentReviewList:[]
        }
    },
    computed:{
        isAllStudent(){
            return this.$store.state.studentAppraise.isAllStudent;
        }
    },
    methods:{
        handelShowPicker(){
            this.showPicker = true;
        },
        handelClassifySelect(value, index){
            this.timerType = value;
            this.showPicker = false;
            if(index+1 == 3){
                this.$store.commit('studentAppraise/setCurrentPage',1);
                this.$router.push('/studentAppraise/timeSelect'); 
            }
            this.$store.commit('studentAppraise/setScoreInfo_timeType',index+1);
            this.$refs.times.handelInit();
            if(index+1 != 3){
                this.getInfoData()
            }
        },
        getInfoData(){
            let list = [];
            let getDataUrl = null;
            if(this.isAllStudent){
                getDataUrl = 'GetClassStudentInfoList'
            }else{
                getDataUrl = 'GetStudentInfoList'
            }
            this.$store.dispatch(`studentAppraise/${getDataUrl}`).then(res=>{
                let data = res.data;
                let scorePraise = Number(data.scorePraise);
                let scoreCritique = Number(data.scoreCritique);
                let scoreNumber = null;
                if(scoreCritique < 0){
                    scoreNumber = scorePraise - scoreCritique;
                }else{
                    scoreNumber = scorePraise + scoreCritique;
                }

                let scorePraiseRatio = scorePraise / scoreNumber*100;
                let scoreCritiqueRatio = scoreCritique / scoreNumber*100;

                this.scorePraise = scorePraise; 
                this.scoreCritique = scoreCritique; 
                this.scorePraiseRatio = Math.round(scorePraiseRatio*10)/10;
                this.scoreCritiqueRatio = Math.round(scoreCritiqueRatio*10)/10;

                this.scorePraiseRatio = isNaN(this.scorePraiseRatio) ? '0' : this.scorePraiseRatio;

                this.scoreCritiqueRatio = isNaN(this.scoreCritiqueRatio) ? '0' : this.scoreCritiqueRatio;


                if(this.scoreCritiqueRatio < 0){
                    this.scoreCritiqueRatio = Math.abs(this.scoreCritiqueRatio)
                }

                this.reviewTextCount = data.reviewTextCount;
                this.score = data.score;

                this.bestStudent.bestStudentImgUrl = data.bestStudentImgUrl;
                this.bestStudent.bestStudentName = data.bestStudentName;
                this.bestStudent.bestStudentScore = data.bestStudentScore;

                this.headwayStudent.headwayStudentImgUrl = data.headwayStudentImgUrl;
                this.headwayStudent.headwayStudentName = data.headwayStudentName;
                this.headwayStudent.headwayStudentScore = data.headwayStudentScore;

                list = data.studentReview;
                this.studentReviewList = list;
            })
          
        },
        handelGeData(){
            this.getInfoData()
        }
    },
    activated(){
        this.getInfoData()
    }
}
</script>

<style lang="less" scoped>
.colorRed{
    color:#FF0000;
}
.colorBlue{
    color: #128FEF;
}
.circles{
    padding:0 0.26rem;
    .center{
        background-color:#fff;
        border-radius: 0.15rem;
    }
}
</style>

